<template>
	<view class="c-block-full z-box">
		<view class="c-block z-item1">
			<view class="z-item" :style="paper.themequestionfont+';'+paper.themequestiondivstyle">
        <view class="block-inline a-required" :style="paper.themequestiondivstyle" v-if="field.csmwjrequired.value===true">*</view>
				<view v-if="paper.themequestionnoshow=='Y'" class="c-content block-inline">{{index}}. </view>				
				<!-- <view class="c-content block-inline">{{field.csmwjtitle.value}}</view> -->
        <pre class="c-content block-inline zxb-pre" >{{field.csmwjtitle.value}}</pre>
				<view class="block-inline a-score" :style="paper.themequestionfont+';'+paper.themequestiondivstyle" v-if="field.csmwjshowscore.showscore===true && field.csmwjshowscore.method==='oneanswer' && field.csmwjshowscore.oneanswer.score!=null">({{field.csmwjshowscore.oneanswer.score}} {{$t('csmwj.label.score')}})</view>
				
			</view>
			<view class="wrap">
				<u-row gutter="16">
					<u-col span="4" v-for="(item,index) in field.csmwjimages.value" :key="index"><u-image width="100%" :src="item.url" mode="widthFix"></u-image></u-col>
				</u-row>
			</view>
			<view class="wrap">
				<u-checkbox-group @change="checkboxGroupChange" wrap placement="column" v-model="checkboxValue">
					<u-checkbox  
						v-for="(item, index) in val" :key="index" 
						:label="item.value + ((field.csmwjshowscore.showscore===true && field.csmwjshowscore.method==='everyscore' && item.score!=null)?(' ('+item.score+' '+$t('csmwj.label.score')+')'):'')"
						:name="item.value"
						:customStyle="{margin: '4px'}"
						:labelColor="(paper.themeoptionsfontcolor!=null&&paper.themeoptionsfontcolor!='')?paper.themeoptionsfontcolor:''"
						:activeColor="(paper.themeoptionsselectedcolor!=null&&paper.themeoptionsselectedcolor!='')?paper.themeoptionsselectedcolor:''"
					>
						<!-- <view :style="paper.themeoptionsfont">{{item.value}}</view>
						<view class="block-inline a-score" 	:style="paper.themeoptionsfont" v-if="field.csmwjshowscore.showscore===true && field.csmwjshowscore.method==='everyscore' && item.score!=null">({{item.score}} 分)</view> -->
					
					</u-checkbox>
				</u-checkbox-group>		
			</view>
			<view class="c-errormsg" v-if="errormsg!=null">{{errormsg}}</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		name: 'c-parsefg-csmwj-checkbox-group',
		props: {
			field: {
				type: Object
			},
			paper: {
				type: Object
			},
			index: {
				type: Number
			},
		},
		data() {
			return {
				checkboxValue:[],
				val:[],
				errormsg: null,
				inputClass: "a-normalinput",
			};
		},
		mounted() {
			let that = this;
			that.cinit();
		},
		methods: {
			/**
			 * spa. field.options在小程序直接显示会出现问题,因此需要转换为val
			 * spb. 初始化
			 */
			cinit:function(){
				let that = this;
				let field = that.field;			
				//spa.
				for(let index in field.__slot__.options){
					let item = field.__slot__.options[index];
					
					//spb
					let checked = false;
					for(let index2 in field.__answer__){
						let item2 = field.__answer__[index2];
						if(item.value==item2.value && item2.checked){
							checked = true;
						}
					}
	
					that.val.push({value:item.value,checked:checked,score:item.score});
				}
			},
			/**
			 * spa. 记录选取的个数
			 * spb. 必填项校验
			 * spc. 将checked=false去掉
			 */
			__submit:function(){
				let that = this;
				let field = that.field;
				//spa
				// let checkedcount = 0;
				// for(let index in that.val){
				// 	let item = that.val[index];
				// 	if(item.checked===true){
				// 		checkedcount++;
				// 	}
				// }
				let checkedcount = that.checkboxValue.length;
				console.log('-------------',checkedcount);
				//spb
				if(field.csmwjrequired.value===true && (checkedcount==0)){
					that._setErrorMsg(that.$t('csmwj.validate.required'));
					return false;
				}
				that._setOkMsg();
				
				//spc
				// let ret = [];
				// for(let index in that.val){
				// 	let item = that.val[index];
				// 	if(item.checked===true){
				// 		ret.push(item);
				// 	}
				// }
				
				//return ret;
				return that.__getVal();
			},
			__getVal:function(){
				let that = this;
				// let ret = [];
				// for(let index in that.val){
				// 	let item = that.val[index];
				// 	if(item.checked===true){
				// 		ret.push(item);
				// 	}
				// }
				let ret = [];
				for(let index in that.checkboxValue){
					ret.push({value:that.checkboxValue[index]});
				}
				return ret;
			},
			_setErrorMsg: function(msg) {
				let that = this;
				that.errormsg = msg;
				that.inputClass = "a-errorinput";
			},
			_setOkMsg: function() {
				let that = this;
				that.errormsg = '';
				that.inputClass = "a-normalinput";
			},
			checkboxGroupChange:function(){
				
			}
		}
	};
</script>

<style scoped lang="scss">;
.a-required{
	padding-right: 6rpx !important; background-color: transparent !important;
	color: red;
	font-weight: bold;
}
.a-score{
	padding-left:10rpx;
}	
.c-block{padding: 0;}
</style>